
<!doctype html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<link href="css/css.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8">
<title>优惠卷</title>
<style>
/*是否过期*/
.term_box{ height:46px; position:relative; background-color:#fff;}
.term{ height:46px; line-height:46px; text-align:center; width:50%; float:left; font-size:14px; color:#65646b;}
.blue{ width:50%; height:2px; position:absolute; bottom:0; left:0; background-color:#01aff0;}
/*coupon优惠券*/
.move_box{ width:100%; overflow:hidden}
.move{ width:200%; position:relative;}
.coupon_box{ width:50%; float:left}
.coupon{ width:92%; margin-left:4%; margin-top:14px; height:74px;}
.coupon_num{ width:33%; height:74px; line-height:74px; text-align:center; background-color:#ff7f00; float:left; color:white; font-size:33px;}
.coupon_text{ float:left; position:relative; width:67%; height:74px; background-color:#fff; padding-left:5%; padding-top:14px; box-sizing:border-box}
.coupon_text h1{ line-height:26px; font-size:18px; color:#65646b}
.coupon_text span{ line-height:26px; font-size:18px; color:#c40000}
.coupon_text h2{ line-height:21px; font-size:12px; color:#65646b}
.coupon_text p{ line-height:24px; font-size:12px; color:#ff7f00; position:absolute;top:0;right:10px;}
.overdue .coupon_num{background-color:#b2bab8}
.overdue .coupon_text span,.overdue .coupon_text h1,.overdue .coupon_text h2,.overdue .coupon_text p{color:#b2bab8}
</style>
</head>

<body style="background-color: #f9f9f9;">
<!--header顶部标题-->
<div class="header">优惠券
	<div class="header_left" onClick="window.history.go(-1)"><img src="images/return.png"></div>
    <div class="header_right" id="open_sta" onClick="statement()">使用细则</div>
</div>
<!--term是否过期-->
<div class="term_box">
	<div class="term" style="color:#01aff0;">未使用</div>
    <div class="term">过期券</div>
    <div class="border_bottom"></div>
    <div class="blue"></div>
</div>
@if ($row == 'false')
   <p style="text-align: center;height: 66px;font-weight: bold;line-height: 66px;">暂无优惠券</p>
@else
   <!--coupon优惠券-->
   <div class="move_box">
   <div class="move">

   	<!--未使用的优惠券-->
   	<div class="coupon_box">
        @if ($rows != "false")
            @foreach ($rows as $v)
                <div class="coupon">
                    <div class="coupon_num">￥{{$v->discount}}</div>
                    <div class="coupon_text">
                        <div class="border_top"></div>
                        <div class="border_right"></div>
                        <div class="border_bottom"></div>
                        <h1>满<span>{{$v->shold}}</span>元使用</h1>
                        <h2>使用期限：{{$v->not_before}}&nbsp;&nbsp;{{$v->not_after}}</h2>
                        <p>{{$v->type}}</p>
                    </div>
                </div>
            @endforeach
            @else
            <h2>&nbsp;</h2>
            @endif
       </div>

       <!--已过期的优惠券-->
       <div class="coupon_box  overdue">
                   @if ($rowss != "false")
            @foreach ($rowss as $v)
            <div class="coupon">
                  <div class="coupon_num">￥{{$v->discount}}</div>
                      <div class="coupon_text">
                          <div class="border_top"></div>
                          <div class="border_right"></div>
                          <div class="border_bottom"></div>
                          <h1>满<span>{{$v->shold}}</span>元使用</h1>
                          <h2>使用期限：{{$v->not_before}}&nbsp;&nbsp;{{$v->not_after}}</h2>
                          <p>{{$v->type}}</p>
                      </div>
                  </div>
            @endforeach
            @else
            <h2>&nbsp;</h2>
            @endif
           <!--coupon优惠券-->
       </div>


   </div>
   </div>
@endif



<!--使用细则-->
<div class="black" id="black"></div>
<div class="statement" id="statement">
	<div class="statement_header">使用细则
    	<div class="border_bottom"></div>
    </div>
    <img class="close" onClick="close_sta()" src="images/close.png">
    <div class="statement_text">
    	<h1>一、优惠券的基本使用说明</h1>
    	<p>1.优惠券是仅限在PG页面使用，按面值总额减免支付的优惠券。</p>
        <p>2.优惠券分三种：满减券、折扣满减券。</p>
        <P>3.优惠券获取方式：通过保洁页面的买赠、活动参与等形式获取。</P>
        <P>4.使用满减券、折扣满减卷、在订单未支付时取消订单，则订单取消后，优惠券均不返还(<span style="color:#FF0000;"><strong>所以请用户对于优惠券的使用请慎重，概不退还！！！；</strong>有什么疑问请拨打客服电话：15886539859，客服在线时间：早上9:00-晚上9：00</span>)；若订单被支付后，取消某一子单或取消全部子单，优惠券均不返还。</P>
        <p>6.优惠券不能进行兑现、出售、转让或其他用途。</p>
        <p>7.本规则由PG依据国家相关法律法规及规章制度予以解释。</p>
    </div>
    <div class="statement_text">
    	<h1>二、各类优惠券具体使用规则</h1>
        <p>1.全场满减券：PG内通用，无使用限额、品类、地域限制，订单中所购商品总额需达到用券限额才能使用。单张订单限用1张全场满减券，按面值金额减免支付。</p>
        <p>2.品类满减券 ：PG内使用，但受品类限制，只能购买特定品类商品。单张订单限用1张品类满减券，按面值金额减免支付。</p>
        <p>3.商品满减券 ：PG内使用，但受商品限制，只能购买特定商品，单张订单限用1张商品满减券，按面值金额减免支付。</p>
    </div>

</div>
<script>
//隐藏使用细则
document.getElementById('black').style.display="none";
document.getElementById('statement').style.display="none";
//点击使用细则按钮，显示使用细则
function statement(){
	document.getElementById('black').style.display="block";
	document.getElementById('statement').style.display="block";
	}
//点击关闭按钮，关闭使用细则
function close_sta(){
	document.getElementById('black').style.display="none";
	document.getElementById('statement').style.display="none";
	}
$(".term:eq(0)").click(
	function(){
		$(".blue").animate({left:'0%'});
		$(".move").animate({left:'0%'});
		}
)
$(".term:eq(1)").click(
	function(){
		$(".blue").animate({left:'50%'});
		$(".move").animate({left:'-100%'});
		}
)
</script>
</body>
</html>
